<template>
  <div class="q-pa-md" style="display: flex; gap: 10px; flex-wrap: wrap">
    <t-button
      icon="add"
      label="主题按钮"
      class="tr-button-primary"
      :show-hint="true"
      hint-msg="常规按钮"
      tabIndex="3"
      :disable="true"
    />
    <t-button
      icon="add"
      label="线框按钮"
      class="tr-button-default tr-button-responsive-lg"
      :show-hint="true"
      hint-msg="常规按钮"
      @click="click12"
    />
    <t-button
      icon="add"
      label="次级按钮"
      class="tr-button-default tr-button-secondary"
      :show-hint="true"
      hint-msg="常规按钮"
    />
    <t-button
      icon="add"
      label="文字按钮"
      class="tr-button-text"
      :show-hint="true"
      hint-msg="常规按钮"
    />
    <t-button
      icon="add"
      label="文字链接"
      class="tr-button-link"
      :show-hint="true"
      hint-msg="常规按钮"
    />
    <!-- <t-button
      loading
      icon="add"
      label="按钮"
      class="tr-button-primary-responsive tr-button-mobile-hidetext tr-button-primary-loading"
      :show-hint="true"
      hint-msg="按钮"
    />
    <t-button
      disable
      icon="add"
      label="按钮"
      class="tr-button-primary-responsive tr-button-mobile-hidetext"
      :show-hint="true"
      hint-msg="按钮"
    /> -->
  </div>
  <div class="q-pa-md" style="display: flex; gap: 10px; flex-wrap: wrap">
    <t-button
      icon=""
      label="按钮"
      :show-hint="true"
      hint-msg="你好"
      :enable-event="false"
      :enable-event-expression="false"
      enable-event-message="不满足事件触发条件"
      :enable-comfrim-message="false"
      comfrim-message="操作确认"
      shortcut-key=""
      shortcut-key-comb-ctrl=""
      shortcut-key-comb-key=""
      shortcut-key-custom=""
      @click="onclick"
    />
    <t-button
      icon="add"
      label="常规按钮"
      class="tr-button-default"
      :show-hint="true"
      hint-msg="常规按钮"
    />
    <t-button icon="" label="突出按钮突出按钮" class="tr-button-primary" ref="ceshi"/>
    <t-button icon="" label="文字按钮" class="tr-button-text" />
    <t-button icon="add" label="" class="tr-button-icon-primary" loading/>
    <t-button icon="add" label="" class="tr-button-icon-default" />
    <t-button icon="add" label="" class="tr-button-icon-text" />
    <t-button icon="" label="你好" class="tr-button-primary" disable />
    <t-button icon="" label="你好" class="tr-button-default" disable />
    <t-button icon="" label="你好" class="tr-button-text" disable />
    <t-button icon="" label="你好" class="tr-button-primary" loading />
    <t-button icon="" label="你好" class="tr-button-default" loading />
    <t-button icon="" label="你好" class="tr-button-text" loading />
    <t-button
      icon=""
      label="紧凑按钮"
      class="tr-button-primary tr-button-dense"
    />
    <t-button
      icon="add"
      label="新增"
      class="tr-button-default tr-button-dense"
    />
    <t-button icon="" label="文字按钮" class="tr-button-text tr-button-dense" />
    <t-button icon="add" label="" class="tr-button-primary tr-button-dense" />
  </div>
  <!-- none Ctrl+S combined custom-->
</template>
<script setup>
import { ref } from 'vue'
const ceshi = ref(null)
function onclick() {
  ceshi.value.loading = !ceshi.value.loading;
}
function click12(event) {
  console.log(event)
}
</script>
